阡陌的博客

# 用 vscode 开发 vue

参考文章：https://segmentfault.com/a/1190000019055976

https://juejin.im/post/6844904068746313736

​

vetur + prettier + eslint +vscode

代码整洁的重要性

  1. 安装vscode 插件

    vetur + prettier + eslint

  2. 在项目中安装 npm 包

    npm i -D eslint eslint-config-prettier eslint-plugin-prettier prettier
    1

  3. 在项目新建.prettierrc.js文件，配置详见 prettier 的配置 (opens new window)

  4. 查看eslint的默认配置

  • cmd + shif + p调出vscode 的命令面板，输入defaultSetting

image-20200927170503230

  • cmd +f 输入eslint

​ image-20200927170750910

# 自定义 vscode 的 eslint 的配置

几个比较重要的 eslint 的配置

# eslint.validate

在 vscode插件 ESLint (opens new window) 版本 2.0.4 后无需针对 vue、html的校验再配置。 看下图高亮部分的官方解释：

image-20200927171657331

但**老版本（<2.0.4）**的eslint插件默认只对js文件进行校验，如果需要对vue,html文件中的js进行校验，需要配置eslint.validate，添加html,vue的校验，配置如下：

"eslint.validate": [
    "javascriptreact",
    "html",
    {"language": "javascript","autoFix": true},
    {"language": "vue","autoFix": true}
 ]
1
2
3
4
5
6

# 文件在保存时自动 eslint fix

在 vscode插件 ESLint (opens new window) 版本 2.0.4 后，想要在保存文件时自动 eslint，则需要配置editor.codeActionsOnSave，而不是"eslint.autoFixOnSave，配置如下：

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}
1
2
3

建议升级 vscode 的版本和 eslint 的版本至最新，如果 eslint 使用老版本（<2.0.4），配置如下：

"eslint.autoFixOnSave": true, // eslint(v2.0.4前)可用
1

# 状态栏中显示eslint，方便查看eslint服务是否正常运行

"eslint.alwaysShowStatus": true
1

# 不显示eslint校验的警告信息

"eslint.quiet": true
1

# 总结

目前我 vscode 关于 eslint 的配置如下：

"eslint.alwaysShowStatus": true,
"eslint.quiet": true,
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}
1
2
3
4
5
6

同时针对项目的 vscode也是如此配置，方便团队协作，写出统一的代码风格。